<template>
  <Card class="rwdlpz-optional-editor" style="height:900px">
    <div class="form-column-container">
      <div class="option-item form-column-item">
        <v-optional-editor label="业务角色" labelValue="辅导费" :type="type!=undefined && 'select'" v-model="gdh"
                           :selectData="optionsData">
        </v-optional-editor>
      </div>
      <div class="option-item form-column-item role" style="height:auto;">
        <v-form-item label="可查看业务角色" v-if="type==undefined">征信、审核</v-form-item>
        <v-form-item label="可查看业务角色" v-else>
          <div class="checkbox-box">
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
            <v-checkbox label="征信"></v-checkbox>
          </div>
        </v-form-item>
      </div>
    </div>
    <div class="other-info" v-if="type==undefined">
      <div class="info-item">
        <span>最后更新时间</span>
        <span>2017-04-21 10:45:41.0</span>
      </div>
      <div class="info-item">
        <span>最后更新人</span>
        <span>zhangzelin</span>
      </div>
    </div>
    <div class="bottom-btn" v-if="type!=undefined">
      <v-button type="primary" size="small">确定</v-button>
      <v-button type="green" size="small">重置</v-button>
      <v-button type="warn" size="small" @on-click="handleGoBack">返回</v-button>
    </div>
    <div class="bottom-btn" v-else>
      <v-button type="primary" size="small" @on-click="handleRouterGo(path+'?type=1')">编辑</v-button>
      <v-button type="green" size="small">删除</v-button>
      <v-button type="warn" size="small" @on-click="handleGoBack">返回</v-button>
    </div>
  </Card>
</template>
<script>
  import routeMixin from '../../../mixins/routeMixin'
  export default {
    mixins:[routeMixin],
    data(){
      return {
        gdh: '',
        path: this.$route.path,
        optionsData: [
          {
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶',
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }
        ],
      }
    },
    created(){
    },
    computed: {
      type(){
        return this.$route.query.type;
      }
    },
    mounted(){
    },
    methods: {
      handleRouterGo( path ){
        this.$router.push( path );
      },
    },
    props: {},
    watch: {
      $route( val ){
      }
    },
  }
</script>

<style lang="less">
  .rwdlpz-optional-editor {
    .form-column-item {
      width: 80%;
    }
    .role{
      .v-form-label {
        /*float: left*/
      }
    }
    .checkbox-box {
      width:60%;
      padding-left:30px;
      /*height:40px;*/
      /*line-height: 0;*/
      /*margin-left:200px;*/
      .v-checkbox {
        display:inline-block;
        margin-top: 14px;
        margin-right:15px;
        line-height:1;
      }
    }
  }
</style>
